<template>
  <div class="loadHomeWork">
    <div class="loadHomeWorkIneer">
      <div class="indexContain">
        <div class="banner">
          <div class="unit">
            <div class="name">作业提醒</div>

            <div class="table">
              <el-table
                style="width: 100%; height: auto"
                max-height="180px"
                empty-text="暂无数据"
                :header-cell-style="{
                  background: '#FAFAFA',
                  height: '20px',
                  color: 'black',
                }"
                :row-style="{ height: 30 + 'px' }"
                :cell-style="{ padding: 0 + 'px' }"
                class="tableDate1"
                :data="tableDate1"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="30"
                  align="center"
                />
                <el-table-column
                  label="作业"
                  align="center"
                  prop="homeworkName"
                />
                <el-table-column
                  label="计划量"
                  align="center"
                  prop="plannedQuantity"
                  width="90"
                />
                <el-table-column
                  label="起始日期"
                  align="center"
                  width="90"
                  prop="startDate"
                />
                <el-table-column
                  label="完成日期"
                  align="center"
                  width="90"
                  prop="endDate"
                />
              </el-table>
            </div>
          </div>
          <div class="unit">
            <div class="name">船舶年检/证书到期提醒</div>
            <div class="table">
              <el-table
                style="width: 100%; height: auto"
                max-height="180px"
                empty-text="暂无数据"
                @row-dblclick="handleRowDblclick"
                :header-cell-style="{
                  background: '#FAFAFA',
                  height: '20px',
                  color: 'black',
                }"
                :row-style="{ height: 30 + 'px' }"
                :cell-style="{ padding: 0 + 'px' }"
                class="tableDate1"
                :data="tableDate2"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="30"
                  align="center"
                />

                <el-table-column label="项目名称" align="center" prop="name" />
                <el-table-column
                  prop="certificateType"
                  label="船舶名称"
                  width="90"
                  align="center"
                >
                  <template #default="scope">
                    <div v-if="scope.row.certificateType == 1">海港未来</div>
                    <div v-else-if="scope.row.certificateType == 2">
                      海港致远
                    </div>
                    <div v-else-if="scope.row.certificateType == 3">
                      淮河能源启航
                    </div>
                    <div v-else>""</div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="签发日期"
                  align="center"
                  width="90"
                  prop="issueDate"
                />
                <el-table-column
                  label="到期日期"
                  align="center"
                  width="90"
                  prop="dueDate"
                />
              </el-table>
            </div>
          </div>
          <div class="unit">
            <div class="name">月度装载统计</div>
            <div class="name1">
              本月度累计完成装载<span style="color: #84aaff"
                >{{ currentLoadTime }}次</span
              >,装载量<span style="color: #84aaff"
                >{{ currentLoadMonth }}m³</span
              >,同比增长<span style="color: #84aaff"
                >{{ currentLoadMonthIncrece }}%</span
              >
            </div>
            <div class="name1">
              本年度累计完成装载<span style="color: #84aaff"
                >{{ currentLoadAllTime }}次</span
              >,装载量<span style="color: #84aaff"
                >{{ currentLoadAllValue }}m³</span
              >,同比增长<span style="color: #84aaff"
                >{{ currentLoadAllIncrece }}%</span
              >
            </div>
            <div class="chart1" style="height: 400px"></div>
          </div>
          <div class="unit">
            <div class="name">月度加注统计</div>
            <div class="name1">
              本月度累计完成加注<span style="color: #fd746a"
                >{{ currentfillTime }}次</span
              >,加注量<span style="color: #fd746a"
                >{{ currentfillMonth }}m³</span
              >,同比增长<span style="color: #fd746a"
                >{{ currentfillMonthIncrece }}%</span
              >
            </div>
            <div class="name1">
              本年度累计完成加注<span style="color: #fd746a"
                >{{ currentfillAllTime }}次</span
              >,加注量<span style="color: #fd746a"
                >{{ currentfillAllValue }}m³</span
              >,同比增长<span style="color: #fd746a"
                >{{ currentfillAllIncrece }}%</span
              >
            </div>
            <div class="chart2"></div>
          </div>
          <div class="unit">
            <div class="name"></div>
            <div class="leftAndRight">
              <div class="leftTable"></div>
              <div class="rightEchart"></div>
            </div>
          </div>
          <div class="unit">
            <div class="name"></div>
            <div class="leftAndRight">
              <div class="leftTable"></div>
              <div class="rightEchart1"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EventBus from "@/mitt/eventBus.js";
import rename from "@/mitt/getPath.js";
import service from "@/api/api";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import * as echarts from "echarts";
import sendClass from "@/mitt/sendClass.js";
import getNum from "@/api/apg.js";
let chart1, chart2, chart3, chart4;
export default {
  beforeRouteEnter(to, from, next) {
    sendClass(1, "首页");
    next();
  },
  name: "",
  data() {
    return {
      currentLoadMonth: null,
      currentLoadTime: null,
      currentLoadAllTime: 0,
      currentLoadAllValue: 0,
      currentLoadMonthIncrece: 0,
      currentLoadAllIncrece: 0,

      currentfillMonth: null,
      currentfillTime: null,
      currentfillAllTime: 0,
      currentfillAllValue: 0,
      currentfillMonthIncrece: 0,
      currentfillAllIncrece: 0,

      locale: zhCn,
      tableDate1: [],
      tableDate2: [],
      jtData: null,
      load: {
        current: { month: [], data: [], time: [] },
        previous: { month: [], data: [], time: [] },
      },
      fill: {
        current: { month: [], data: [], time: [] },
        previous: { month: [], data: [], time: [] },
      },
      LoadAndFill: {
        currentYearList: [
          {
            data: "2023-1-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
          {
            data: "2023-2-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
          {
            data: "2023-3-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
          {
            data: "2023-4-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
          {
            data: "2023-5-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
          {
            data: "2023-6-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
          {
            data: "2023-7-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
          {
            data: "2023-8-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
          {
            data: "2023-9-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
          {
            data: "2023-10-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
          {
            data: "2023-11-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
          {
            data: "2023-12-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
        ],
        previousYearList: [
          {
            data: "2023-1-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
          {
            data: "2023-2-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
          {
            data: "2023-3-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
          {
            data: "2023-4-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
          {
            data: "2023-5-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
          {
            data: "2023-6-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
          {
            data: "2023-7-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
          {
            data: "2023-8-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
          {
            data: "2023-9-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
          {
            data: "2023-10-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
          {
            data: "2023-11-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
          {
            data: "2023-12-05",
            fillCapacity: "27374",
            filleTumes: "5",
            loadCapacity: "27433",
            loadTimes: "5",
          },
        ],
      },
      tableDateServe: [],
      tableDatePlace: [],
    };
  },
  methods: {
    handleRowDblclick(row) {
      if (row.type == 1) {
        this.$router.push({
          path: "/app.shipCertificateSeeSecond",
          query: {
            name: row.shipName,
            id: row.certificateType,
            type: "skip",
            dataId: row.dataId,
          },
        });
        sessionStorage.setItem("activeLine", "设备证书");
      } else if (row.type == 2) {
        this.$router.push({
          path: "/app.deviceCertificateAddSecond",
          query: {
            name: row.shipName,
            id: row.certificateType,
            type: "skip",
            dataId: row.dataId,
          },
        });
        sessionStorage.setItem("activeLine", "设备证书");
      }
    },
    handSize() {
      chart1.resize();
      chart2.resize();
      // chart3.resize();
      // chart4.resize();
    },
    forMateMoth(a) {
      let date = new Date(a);
      let month = date.getMonth() + 1;

      return month;
    },
    deilNum(a) {
      a.currentYearList.forEach((item) => {
        this.load.current.month.push(this.forMateMoth(item.date) + "月");
        this.load.current.data.push(item.loadCapacity);
        this.load.current.time.push(item.loadTimes);
        this.fill.current.month.push(this.forMateMoth(item.date) + "月");
        this.fill.current.data.push(item.fillCapacity);
        this.fill.current.time.push(item.fillTimes);
      });
      a.previousYearList.forEach((item) => {
        this.load.previous.month.push(this.forMateMoth(item.date) + "月");
        this.load.previous.data.push(item.loadCapacity);
        this.load.previous.time.push(item.loadTimes);
        this.fill.previous.month.push(this.forMateMoth(item.date) + "月");
        this.fill.previous.data.push(item.fillCapacity);
        this.fill.previous.time.push(item.fillTimes);
      });
    },
    customIndex(index) {
      return (this.page - 1) * this.size + index + 1;
    },

    getIndexNum() {
      // 处理第一个饼状图
      this.getCertificateReminder();
      // this.getWorkReminder();
      let that = this;
      this.tableDateServe = [];

      service({
        methods: "get",
        url: "/report/load-report",
      }).then((e) => {
        this.load = {
          current: { month: [], data: [], time: [] },
          previous: { month: [], data: [], time: [] },
        };
        this.fill = {
          current: { month: [], data: [], time: [] },
          previous: { month: [], data: [], time: [] },
        };
        this.LoadAndFill = e.data;
        this.deilNum(this.LoadAndFill);
        chart2 = echarts.init(document.getElementsByClassName("chart2")[0]);

        for (let i = 0; i < that.fill.current.data.length; i++) {
          that.fill.current.data[i] = parseFloat(
            that.fill.current.data[i]
              .toString()
              .match(/^-?\d+(?:\.\d{0,1})?/)[0]
          );
        }

        let opt2 = {
          calculable: true,
          background: "rgba(0,0,0,0)",
          grid: {
            left: 50,
            bottom: 30,
            rigth: 0,
          },
          xAxis: [
            {
              type: "category",
              triggerEvent: true,
              data: that.fill.current.month,
              axisTick: {
                show: false,
                alignWithLabel: true, //刻度线和标签对齐
                interval: 0, //间隔
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#AEAEAE", // 轴线颜色
                },
              },
              axisLable: {
                textStyle: {
                  color: "#AEAEAE", // 轴标签颜色
                },
              },
              splitLine: {
                show: false, //网格线开关
              },
              label: {
                show: true,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              // name: "百分比",
              label: {
                show: true,
              },
              splitLine: {
                show: false, // 默认显示，属性show控制显示与否
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                textStyle: {
                  color: "#AEAEAE", //Y轴内容文字颜色
                },
              },
              splitLine: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: "完成情况",
              type: "bar",
              barWidth: "40%",
              barMaxWidth: "30",
              data: that.fill.current.data,
              color: "#FD746A",
              itemStyle: {
                borderRadius: [5, 5, 0, 0], // 分别设置柱子左、右上、下角的圆角大小
              },
              labelLayout: { hideOverlap: true },
              label: {
                textStyle: {
                  align: "center", // 设置文本居中
                },
                show: true,
                position: "top",
                hideOverlap: true,

                formatter: function (e) {
                  return (
                    "{color|" +
                    (e.data +
                      "m³" +
                      "\n " +
                      that.fill.current.time[e.dataIndex] +
                      "次" +
                      "}")
                  );
                },
                rich: {
                  color: {
                    color: "#FD746A",
                  },
                },
              },
            },
          ],
        };
        chart2.setOption(opt2);
        let date = new Date();
        this.currentMonth = date.getMonth() + 1 + "月";
        let fillIndex = date.getMonth();

        // 当月次数
        this.currentfillTime = this.fill.current.time[fillIndex];

        if (!this.currentfillTime) {
          this.currentfillTime = 0;
        }
        this.currentfillMonth = this.fill.current.data[fillIndex];

        if (!this.currentfillMonth) {
          this.currentfillMonth = 0;
        }
        this.fill.current.time.forEach((item) => {
          this.currentfillAllTime += parseFloat(item);
        });
        this.fill.current.data.forEach((item) => {
          this.currentfillAllValue += parseFloat(item);
        });

        this.currentfillAllValue = parseFloat(
          this.currentfillAllValue.toFixed(2)
        );

        if (this.fill.previous.data[fillIndex] && this.currentfillMonth) {
          this.currentfillMonthIncrece =
            ((this.currentfillMonth - this.fill.previous.data[fillIndex]) /
              this.fill.previous.data[fillIndex]) *
            100;
        } else {
          this.currentfillMonthIncrece = 0;
        }
        this.currentfillMonthIncrece =
          Math.round(this.currentfillMonthIncrece * 100) / 100;

        let previousfill = 0;

        for (let i = 0; i < this.fill.previous.data.length; i++) {
          if (i <= fillIndex) {
            if (this.fill.previous.data[i]) {
              previousfill += parseFloat(this.fill.previous.data[i]);
            }
          }
        }

        this.currentfillAllIncrece =
          ((this.currentfillAllValue - previousfill) / previousfill) * 100;

        this.currentfillAllIncrece = parseFloat(
          this.currentfillAllIncrece.toFixed(2)
        );

        if (this.currentfillAllIncrece == Infinity) {
          this.currentfillAllIncrece = 0;
        }

        // this.load.current.month.reverse();
        // this.load.current.data.reverse();
        // 第一个柱状图
        chart1 = echarts.init(document.getElementsByClassName("chart1")[0]);

        for (let i = 0; i < that.load.current.data.length; i++) {
          that.load.current.data[i] = parseFloat(
            that.load.current.data[i]
              .toString()
              .match(/^-?\d+(?:\.\d{0,1})?/)[0]
          );
        }

        let opt1 = {
          calculable: true,
          background: "rgba(0,0,0,0)",
          grid: {
            left: 50,
            bottom: 30,
            rigth: 0,
          },
          xAxis: [
            {
              type: "category",
              data: this.load.current.month,
              axisTick: {
                show: false,
                alignWithLabel: true, //刻度线和标签对齐
                interval: 0, //间隔
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#AEAEAE", // 轴线颜色
                },
              },
              axisLable: {
                textStyle: {
                  color: "#AEAEAE", // 轴标签颜色
                },
              },
              splitLine: {
                show: false, //网格线开关
              },
              label: {
                show: true,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              // name: "百分比",
              label: {
                show: true,
              },
              splitLine: {
                show: false, // 默认显示，属性show控制显示与否
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                textStyle: {
                  color: "#AEAEAE", //Y轴内容文字颜色
                },
              },
              splitLine: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: "完成情况",
              type: "bar",
              barWidth: "40%",
              barMaxWidth: "30",
              data: that.load.current.data,
              labelLayout: { hideOverlap: true },
              color: "#789BF5",
              itemStyle: {
                borderRadius: [5, 5, 0, 0], // 分别设置柱子左、右上、下角的圆角大小
              },
              label: {
                show: true,
                position: "top",
                hideOverlap: true,
                textStyle: {
                  align: "center", // 设置文本居中
                },
                formatter: function (e) {
                  return (
                    "{color|" +
                    (e.data +
                      "m³" +
                      "\n " +
                      that.load.current.time[e.dataIndex] +
                      "次" +
                      "}")
                  );
                },
                rich: {
                  color: {
                    color: "#789BF5",
                    textAlign: "center",
                  },
                },
              },
            },
          ],
        };
        chart1.setOption(opt1);

        let loadIndex = date.getMonth();
        this.currentLoadTime = this.load.current.time[loadIndex];
        if (!this.currentLoadTime) {
          this.currentLoadTime = 0;
        }
        this.currentLoadMonth = this.load.current.data[loadIndex];
        if (!this.currentLoadMonth) {
          this.currentLoadMonth = 0;
        }
        this.load.current.time.forEach((item) => {
          this.currentLoadAllTime += parseFloat(item);
        });
        this.load.current.data.forEach((item) => {
          this.currentLoadAllValue += parseFloat(item);
        });
        this.currentLoadAllValue = parseFloat(
          this.currentLoadAllValue.toFixed(2)
        );
        if (this.load.previous.data[loadIndex] && this.currentLoadMonth) {
          this.currentLoadMonthIncrece =
            ((this.currentLoadMonth - this.load.previous.data[loadIndex]) /
              this.load.previous.data[loadIndex]) *
            100;
        } else {
          this.currentLoadMonthIncrece = 0;
        }
        this.currentLoadMonthIncrece =
          Math.round(this.currentLoadMonthIncrece * 100) / 100;

        if (this.currentLoadMonthIncrece == "Infinity") {
          this.currentLoadMonthIncrece = 0;
        }

        let previousAll = 0;

        for (let i = 0; i < this.load.previous.data.length; i++) {
          if (i <= loadIndex) {
            if (this.load.previous.data[i]) {
              previousAll += parseFloat(this.load.previous.data[i]);
            }
          }
        }

        this.currentLoadAllIncrece =
          ((this.currentLoadAllValue - previousAll) / previousAll) * 100;

        this.currentLoadAllIncrece = parseFloat(
          this.currentLoadAllIncrece.toFixed(2)
        );
        if (this.currentLoadAllIncrece == Infinity) {
          this.currentLoadAllIncrece = 0;
        }
      });

      this.getWorkReminder();
      // 第一个柱状图

      this.getWorkReminder();
    },

    getCertificateReminder() {
      service({
        methods: "get",
        url: "/report/certificate-remind",
      }).then((e) => {
        this.tableDate2 = e.data;
      });
    },

    // 获取作业提醒数据
    getWorkReminder() {
      service({
        methods: "get",
        url: "/report/homework-remind",
      }).then((e) => {
        this.tableDate1 = e.data;
      });
    },
    // 获取月度装载-加注统计

    // 获取船公司服务情况
    async getCompanyService() {
      let r = await getNum("/report/homework-distribution");

      return r;
    },
    sendMessage() {
      let res = rename();
      EventBus.emit("custom-event", res);
    },
    // 获取列表数据

    formatterDate(a) {
      let date = new Date(a);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return `${year}/${month}/${day}`;
    },
  },
  watch: {
    "$store.state.width"(newVal, oldVal) {
      //对数据执行操作
      if (window.innerWidth > 630) {
        if (newVal == 90) {
          this.tableWidth = window.innerWidth - 140 + "px";
        } else if (newVal == 200) {
          this.tableWidth = window.innerWidth - 220 + "px";
        }
      }
      chart3.resize();
      chart4.resize();
      chart1.resize();
      chart2.resize();
    },
  },

  created() {},
  beforeMount() {
    if (window.innerWidth > 630 && window.innerHeight < 960) {
      if (this.$store.state.width == 200) {
        this.tableWidth = window.innerWidth - 220 + "px";
      } else {
        this.tableWidth = window.innerWidth - 110 + "px";
      }
    } else {
      this.tableWidth = window.innerWidth - 20 + "px";
    }

    this.sendMessage();
  },
  mounted() {
    this.getIndexNum();
    let that = this;

    window.addEventListener("resize", this.handSize);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handSize);
  },
};
</script>
<style lang="less" scoped>
.table {
  padding: 10px 10px;
}
.chart1,
.chart2 {
  padding: 0 10px;
  width: 100%;
  height: 400px;
}
.loadHomeWork {
  width: 100%;
}
.loadHomeWorkIneer {
  width: 100%;
  height: 100%;

  padding: 10px 10px;
}
.indexContain {
  width: 100%;
  // height: 100%;
  overflow: hidden;
  background: #f0f3f4;
  // padding: 10px 10px 0 10px;
  .banner {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: auto;
    overflow-x: hidden;
    .unit {
      width: 49.8%;
      background: white;
      // background: #213e8e;
      margin-bottom: 5px;
      // border: 1px solid #7e7e7e;
      .name,
      .name1 {
        color: black;
        font-size: 20px;
        line-height: 24px;
        text-align: center;
        font-weight: 800;
        padding: 3px 10px;
      }
      .name {
        padding: 10px 0 0 0;
      }
      .leftAndRight {
        width: 100%;
        height: 300px;
      }
      .name1 {
        text-align: center;
        font-size: 16px;
        font-weight: 400;
      }
      .chart1 {
        padding: 0 10px;
        height: 300px;
      }
      .leftAndRight {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 400px;
        .leftTable {
          width: 30%;
          min-width: 100px;
          font-size: 15px;
          padding: 0 10px;
          // height: auto;
          align-items: center;

          .leftTableTop,
          .leftTableTop1,
          .lineContain,
          .lineContain1 {
            width: 100%;

            // height: 20px;
            line-height: 20px;
            text-align: center;
            display: flex;
            background: #30c1b4;
            .leftTitle {
              width: 50%;
              min-width: 50px;
              color: white;
            }
            .leftTitle:nth-child(1) {
              border-right: 1px solid white;
            }

            .everyLine {
              width: 100%;
              height: 20px;
              display: flex;
              .leftTitle {
                width: 50%;
                min-width: 50px;
                color: black;
              }
              .leftTitle:nth-child(1) {
                border-right: 1px solid white;
              }
            }
          }
          .lineContain {
            display: block;
          }
        }
        .rightEchart,
        .rightEchart1 {
          width: 70%;
          height: 100%;
          // background: green;
        }
      }
      .table {
        width: 100%;
        height: 200px;
        .tableDate1 {
          color: black;
        }
      }
      // background: green;
    }
  }
}
.leftTableTop1 {
  background: #4874cb !important;
}
.lineContain {
  .everyLine:nth-child(odd) {
    background: #eafaf9;
  }
  .everyLine:nth-child(even) {
    background: #d4f3f1;
  }
}
.lineContain1 {
  display: block !important;
  .everyLine:nth-child(odd) {
    background: #d0d5eb;
  }
  .everyLine:nth-child(even) {
    background: #e9ebf7;
  }
}
@media (min-width: 0px) and (max-width: 960px) {
  // .banner {
  //   display: block !important;
  .unit {
    width: 99% !important;
  }
  // }
}
</style>
